<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>用户注册</title>
	<link rel="stylesheet" href="layui\css\layui.css">
	<script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
</head>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
	<legend style="text-align: center;">用户注册</legend>
</fieldset>

<body>
		<form class="layui-form" action="" style="width: 30%;margin-left: 560px;">
			<div class="layui-form-item">
				<label class="layui-form-label">用户名</label>
				<div class="layui-input-block">
					<input type="text" name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-inline">
					<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off"
						class="layui-input">
				</div>
				<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">昵称</label>
				<div class="layui-input-block">
					<input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入不小于六个字符的昵称"
						class="layui-input">
					<!--  <input type="text" name="webname" lay-verify="title" autocomplete="off" placeholder="请输入不小于六个字符的昵称"
                    class="layui-input"> -->
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">省份</label>
				<div class="layui-input-block">
					<input type="text" name="provname" placeholder="请输入省份" autocomplete="off" class="layui-input">
					<!-- <input type="text" name="province" lay-verify="required" lay-reqtext="不可为空？" placeholder="请输入省份"
                    autocomplete="off" class="layui-input"> -->
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">城市</label>
				<div class="layui-input-block">
					<input type="text" name="cityname" placeholder="请输入城市" autocomplete="off" class="layui-input">
					<!-- <input type="text" name="city" lay-verify="required" lay-reqtext="不可为空？" placeholder="请输入城市"
                    autocomplete="off" class="layui-input"> -->
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">邮箱</label>
				<div class="layui-input-block">
					<input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="请输入格式正确的邮箱"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">出生日期</label>
					<div class="layui-input-inline">
						<input type="text" name="birthday" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
							autocomplete="off" class="layui-input">

					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block">
						<input type="radio" name="sex" value="男" title="男" checked="">
						<input type="radio" name="sex" value="女" title="女">
					</div>
				</div>

			</div>


			<div class="layui-form-item">
				<div class="layui-input-block">
					<button type="submit" class="layui-btn" lay-submit="" lay-filter="sbmt">注册</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>


	<script src="layui\layui.all.js"></script>
	<script>
		layui
			.use(
				['form', 'layedit', 'laydate'],
				function () {
					var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;

					//日期
					laydate.render({
						elem: '#date'
					});
					laydate.render({
						elem: '#date1'
					});

					//创建一个编辑器
					var editIndex = layedit.build('LAY_demo_editor');

					//自定义验证规则
					form.verify({
						title: function (value) {
							if (value.length < 6) {
								return '昵称不小于六个字符';
							}
						},
						pass: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
						content: function (value) {
							layedit.sync(editIndex);
						}
					});

					//监听指定开关
					form.on('switch(switchTest)', function (data) {
						layer.msg('开关checked：'
							+ (this.checked ? 'true' : 'false'), {
							offset: '6px'
						});
						layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF',
							data.othis)
					});

					//监听提交
					form.on('submit(sbmt)', function (data) {

						// console.log(data.field);
						// console.log("username=" + data.field.username
						// 		+ "&password=" + data.field.password
						// 		+ "&provname=" + data.field.provname
						// 		+ "&cityname=" + data.field.cityname
						// 		+ "&birthday=" + data.field.birthday
						// 		+ "&sex=" + data.field.sex + "&name="
						// 		+ data.field.name);

						$.post("/bbs/reg", //修改ajax post的url与属性名称
							"username=" + data.field.username
							+ "&password=" + data.field.password
							+ "&provname=" + data.field.provname
							+ "&cityname=" + data.field.cityname
							+ "&birthday=" + data.field.birthday
							+ "&sex=" + data.field.sex + "&name="
							+ data.field.name, function (data) {
								if (data == "true") {
									layer.msg('注册成功', {
										time: 1500

									});
									setTimeout("window.location.href = '/bbs/login.html'", 1500);
								} else {
									layer.msg("该用户名已注册", {
										time: 1500
									});
								}
							}, "text");

						return false;
					});

				});
	</script>
</body>

</html>